<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个vue实例</title>
</head>
<body>
<!--view视图层-->
    <div id="app">
      {{title}}

      <p>{{addAge(age,10)}}</p>
      <hr>
      <p>{{username.toUpperCase()}}</p>
      <p>{{price+num}}</p>
      <p>{{price-num}}</p>
      <p>{{price*num}}</p>
      <p>{{price/num}}</p>
      <p>{{sex==1?"男":"女"}}</p>

    </div>

</body>
<script src="js/vue.min.js"></script>
<script>
  // 创建一个vue实例
  var vue = new Vue({
    el:"#app",
    data:{
      title:"今天开始学习前端vue！",
      age:10,
      username:"kabuda",
      price:12.35,
      num:20,
      sex:1
    },
    methods:{
      addAge:function (val,num){
        return val+num;
      }
    }
  });
</script>
</html>